import React, { Component } from 'react';
import { MoreOutline, LeftOutline, StarOutline, MessageOutline, TruckOutline } from 'antd-mobile-icons'
import '../style/Index/Detail/detail.css'
import { withRouter } from 'react-router-dom';
import services from '../api/interface'
import { Swiper } from 'antd-mobile'
import { Collapse } from 'antd-mobile'
import { Button, Space, Toast } from 'antd-mobile'
class Detail extends Component {
    state = {
        delist: [],
        image: [],
        mainlist: []
    }
    onClick() {
        this.props.history.go(-1)
    }
    ongoshop(){
        this.props.history.push('/index/shopcar')
    }
    async onshopcar() {
        var res3 = await services.cart.cart_add({ num: 1, token: localStorage.getItem('token'), userid: localStorage.getItem('userid'), proid: this.state.delist.proid })
        if (res3.data.code == 200) {
            Toast.show({
                icon: 'success',
                content: '加入成功！',
            })
        }
    }
    async componentDidMount() {
        var res = await services.pro.pro_list({ count: 1, limitNum: 20 })
        this.setState({
            mainlist: res.data.data
        })
        var res1 = await services.pro.detail_pro(this.props.location.state.id)
        this.setState({
            image: ((res1.data.data.banners[0])).split(','),
            delist: res1.data.data
        })
    }
    render() {
        return (
            <div className='detail'>
                <div className='dnavbar'>
                    <span onClick={() => { this.onClick() }}><LeftOutline /></span>
                    <div className='dmicon'>
                        <MoreOutline />
                    </div>
                </div>
                <div className='dswiper'>
                    <Swiper autoplay loop allowTouchMove autoplayInterval={2000} style={{ height: '300px' }}>
                        {
                            this.state.image.map((item, index) => {
                                return (
                                    <Swiper.Item key={index}>
                                        <img src={item} alt="" />
                                    </Swiper.Item>
                                )
                            })
                        }
                    </Swiper>
                </div>
                <div className="dcontentt">
                    {
                        <div className="dtext">
                            <span>{this.state.delist.brand}</span>
                            <span>{this.state.delist.category}</span>
                            {this.state.delist.proname}
                        </div>
                    }
                </div>
                <div className="daddress">
                    <Collapse accordion>
                        <Collapse.Panel key='' title='地址'>
                            选择您的地址
                        </Collapse.Panel>
                    </Collapse>
                </div>
                <div className="dshopcar">
                    <div className="dshopcar_left">
                        <TruckOutline onClick={()=>{this.ongoshop()}}/>
                        <MessageOutline />
                        <StarOutline />
                    </div>
                    <div className="dshopcar_right" onClick={() => { this.onshopcar() }}>
                        加入购物车
                    </div>
                </div>
                <p className='delikee'>猜你喜欢</p>
                <div className='main'>
                    {
                        this.state.mainlist.map((item, index) => {
                            return (
                                <div className="mainboxl" key={index} onClick={() => { this.onClick(item) }}>
                                    <div className="img">
                                        <img src={item.img1} alt="" />
                                    </div>
                                    <div className="xia">
                                        <div className="categroy">{item.proname}</div>
                                        <div className="priodd">￥{item.originprice}</div>
                                    </div>
                                </div>

                            )
                        })
                    }
                </div>
            </div>
        );
    }
}

export default withRouter(Detail); 